<template>
  <div>
    <v-content-layout>
      <template #searchFold>
        <v-search-item label="测试测试">
          <a-input v-model:value="value" placeholder="Basic usage" />
        </v-search-item>
        <v-search-item label="测试测试">
          <a-input v-model:value="value" placeholder="Basic usage" />
        </v-search-item>
        <v-search-item label="测试测试">
          <a-select v-model:value="value" placeholder="Basic usage">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </v-search-item>
        <v-search-item label="测试测试">
          <a-select v-model:value="value" placeholder="Basic usage">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </v-search-item>
      </template>
      <template #searchUnfold>
        <v-search-item label="测试测试">
          <a-input v-model:value="value" placeholder="Basic usage" />
        </v-search-item>
        <v-search-item label="测试测试">
          <a-select v-model:value="value" placeholder="Basic usage">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </v-search-item>
        <v-search-item label="测试测试">
          <a-select v-model:value="value" placeholder="Basic usage">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </v-search-item>
      </template>
      <template #handleBtn>
        <a-button type="primary" @click="addForm">添加</a-button>
        <a-button type="primary" @click="addFormMulti">添加多列表单</a-button>
        <a-button type="primary" @click="showDetail">详情</a-button>
        <a-button type="primary" @click="toSub">跳转子应用</a-button>
        <a-button type="primary" @click="showFullScreen">全屏页</a-button>
      </template>
      <template v-slot:table="{ height }">
        <v-table :height="height" :pagination="false" :listData="dataSource" :columns="columns"></v-table>
      </template>
      <template #pagination>
        <a-pagination :total="50" show-size-changer show-quick-jumper></a-pagination>
      </template>
    </v-content-layout>
    <!--  页面业务组件  -->
    <add v-if="addVisible" v-model:visible="addVisible"></add>
    <add-multi v-if="addMultiVisible" v-model:visible="addMultiVisible"></add-multi>
    <!--        <detail v-if="detailVisible" v-model:visible="detailVisible"></detail>-->
    <config-detail v-if="detailVisible" v-model:visible="detailVisible"></config-detail>
    <full-screen-detail v-if="fullScreenVisible" v-model:visible="fullScreenVisible"></full-screen-detail>
  </div>
</template>

<script setup lang="ts">
import add from './add.vue';
import addMulti from './addMulti.vue';
import detail from './detail.vue';
import configDetail from './configDetail.vue';
import fullScreenDetail from './fullScreenDetail.vue';
import { tableColumns } from './config';
import { useRouter } from 'vue-router'
import { ref } from 'vue';

const router = useRouter()
let addVisible = ref(false)
let addMultiVisible = ref(false)
let detailVisible = ref(false)
let fullScreenVisible = ref(false)
let value = ref('')
let columns = ref(tableColumns)
let dataSource: any = ref([])
for (let i = 0; i < 10; i++) {
  dataSource.value.push({
    key: '2',
    name: '西湖区湖底公园1号',
    age: 42,
    address: '西湖区湖底公园1号'
  })
}

let addForm = () => {
  addVisible.value = true
}
let addFormMulti = () => {
  addMultiVisible.value = true
}
let showDetail = () => {
  detailVisible.value = true
}
let showFullScreen = () => {
  fullScreenVisible.value = true
}

const toSub = () => {
  router.push({
    path: '/h5-edit/sample1/index'
  })
}
</script>

<style scoped>
</style>